<!DOCTYPE html>
<html>

<div th:replace="common/jsCssRef :: jsfJsCssRef"></div>

<body class="bgf6">

	<div th:replace="common/head :: jsfHeader"></div>
	
	<div class="main-body pb100">
		<div class="container pt10">
			<div class="dflx sbt">
				<div th:replace="common/left :: jsfLeft"></div>
				
				<div class="body-right">
					<div class="bread-nav bgff">
						<ul class="dflx">
							<li><a href="###">首页</a></li>
							<li><a href="###">统筹规划</a></li>
							<li><a href="/view/specialPlan">专项发展规划</a></li>
							<li><a href="###">编辑</a></li>
						</ul>
					</div>
					
					<div class="bgff mt10 pb50 edit-mode" id="app">
						<div class="wrap">
							
                            <div class="box">
                            	<div class="box-title"><span>编制专项规划基本信息</span></div>
                            	<div class="mt20 f14">
                            		<div class="two">
                            			<span class="title"><i class="cred">*</i> 规划名称</span>
	                					<div class="content">
	                						<input type="text" v-model="plan.planName" class="form-control" placeholder="请输入规划名称"/>
	                					</div>
	                        			<span class="title">规划编号</span>
	                					<div class="content">
	                						<input type="text" v-model="plan.planNo" class="form-control" placeholder="请输入规划编号"/>
                						</div>
                            		</div>
                            		<div class="two">
                            			<span class="title">开始年份</span>
	                					<div class="content">
	                						<div class="input-group">
												<input type="text" v-model="plan.planBeginTime" class="form-control" placeholder="请选择年份" id="datepicker1" >
											</div>
	                					</div>
	                					<span class="title">截止年份</span>
	                					<div class="content">
	                						<div class="input-group">
												<input type="text" v-model="plan.planEndTime" class="form-control" placeholder="请选择年份" id="datepicker2">
											</div>
	                					</div>
                            		</div>
                					<div class="two">
                						<span class="title">编制单位</span>
	                					<div class="content">
	                						<input type="text" v-model="plan.compileUnit" class="form-control" placeholder="请输入编制单位" />
	                					</div>
	                					<span class="title">编制人</span>
	                    				<div class="content"><input type="text" v-model="plan.compilePerson" class="form-control" placeholder="请输入编制人" /></div>
                					</div>
                					
                					
                					<div class="two">
                            			<span class="title">编制时间</span>
	                					<div class="content">
	                						<div class="input-group">
												<input type="text" v-model="plan.compileTime" class="form-control" placeholder="请选择编制时间" id="datepicker3">
											</div>
	                					</div>
	                					<span class="title">所属全市规划</span>
	                					<div class="content">
											<select class="form-control c999" id="belongPlan" v-model="plan.belongCityPlanNo">
												<option value='' disabled selected class='none'>请选择所属全市规划</option>
												<option value="1000">长沙市规委五局</option>
												<option value="1001">长沙市建设三部</option>
											</select>
	                					</div>
                            		</div>
                            		
                            		<div class="one">
                						<span class="title">上传附件</span>
                        				<div class="content">
                        					<input type="file" class="filestyle" data-input="false" id="filestyle-1" tabindex="-1" style="position: absolute; clip: rect(0px, 0px, 0px, 0px);">
                        					<div class="bootstrap-filestyle input-group">
                        						<span class="group-span-filestyle" tabindex="0">
                        							<label for="filestyle-1" class="btn btn-white ">
                        							<span class="icon-cloud-upload"></span> 
                        							<span class="buttonText">选择上传文件</span></label>
                        						</span>
                        					</div>
                        					<p class="f12 c999 mt3">只能上传jpg/png/word/pdf/zip/excle/ppt格式文件，文件不能超过50MB</p>
                        					<div class="mt10 pb5">
	                        					<a href="" class="mr20">长沙市2019年全市交通监控系统升级.pdf</a>
	                        					<a href="" class="mr20">长沙市2019年全市交通监控系统升级.pdf</a>
	                        				</div>
                        				</div>
                					</div>
                					
                					<div class="one">
                						<span class="title">备注</span>
                        				<div class="content">
                        					<textarea name="" v-model="plan.remark" class="form-control" placeholder="请输入内容" rows="" cols=""></textarea>
                        				</div>
                					</div>
                            	</div>
                            </div>
                            
                            
                            <div class="tc mt40">
                            	<button type="button" class="btn btn-white f12" @click="cancel"> 取消 </button>
                            	<button type="button" class="btn btn-primary f12" @click="submitPlan"> 提交 </button>
								<button v-if="plan.currentState == 1" type="button" class="btn btn-white f12" @click="savePlan"> 保存 </button>
                            </div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	

<script type="text/javascript">
    $('#special').addClass('active');



	var planId = $.getUrlParam('id');

    var appPage = new Vue({
        el : '#app',
        data : {
            plan : {}
        },
        created : function() {
            loadPlanDetail();
        },
        computed : {

        },
        methods : {
            planStatusDesc : function (val) {
                return statusPlanObj[val];
            },
            submitPlan : function () {
                this.plan.currentState = 2;
                this.plan.belongPlanDesc = $('#belongPlan option:selected').text();
                processSavePlan(this.plan);
            },
            savePlan : function () {
                this.plan.currentState = 1;
                this.plan.belongPlanDesc = $('#belongPlan option:selected').text();
                processSavePlan(this.plan);
            },
			cancel(){
            	window.location.href = contentPath + "/view/specialPlan";
			}
        }
    })

    function loadPlanDetail() {
        $.ajax({
            'url' : contentPath + '/specialPlan/getOne',
            'dataType' : 'json',
            'type' : 'get',
            'data' : {
                id : planId
            },
            'success' : function (result) {
                if (result.code != 1000) {
                    alert(result.message);
                    return;
                }

                appPage.plan = result.data;
            },
            'error' : function (result) {
            }
        });
    }

    function processSavePlan(planObject) {
        $.ajax({
            'url' : contentPath + '/specialPlan/update',
            'dataType' : 'json',
            'type' : 'post',
            'contentType':'application/json',
            'data' : JSON.stringify(planObject),
            'success' : function (result) {
                if (result.code != 1000) {
                    alert(result.msg);
                    if (result.code == 5555) {
                        window.location.href = '/';
                    }
                    return;
                }

                appPage.$message({
                    message: appPage.plan.currentState == 1 ? '保存成功' : '提交成功',
                    type: 'success'
                });

                window.location.href = '/view/specialPlan';
            },
            'error' : function (result) {
            }
        });
    }

    $('#datepicker1').fdatepicker({format: 'yyyy-mm-dd'});
    $('#datepicker2').fdatepicker({format: 'yyyy-mm-dd'});
    $('#datepicker3').fdatepicker({format: 'yyyy-mm-dd'});
    $('#datepicker4').fdatepicker({format: 'yyyy-mm-dd'});
    $('#datepicker5').fdatepicker({format: 'yyyy-mm-dd'});

	function getUrlParam(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
		var r = window.location.search.substr(1).match(reg);  //匹配目标参数
		if (r != null) return unescape(r[2]); return null; //返回参数值
	}
</script>
</body>
</html>
